<template>
	<div class="">
		<div class="taskTitleThen">
			{{userInfo.majors.title}}
		</div>
		<div class="theInfo">
			<div class="selectWork" v-for="(item,index) in HomeWorkS" :key="index">
				<div class="detialLeft">
					作业
				</div>
				<div class="detialRight">
					<div class="homworkname">
						<div class="">
							{{item.title}}
						</div>
						<div class="statusIn">
							{{item.UserExam ? item.UserExam.status == true? '已完成' : '未完成' : '' }}
						</div>
					</div>

					<div class="myData">

						{{item.start_time}}-{{item.end_time}}
						<div class="look" @click="dialogVisible = true">
							查看
						</div>
					</div>

				</div>
			</div>
		</div>
		<!-- end -->

		<el-dialog title="财务管理与来钱快如何研究" :visible.sync="dialogVisible" width="60%" center style="border-radius: 8px;"
			:before-close="handleClose">
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
			<div class="inRecord">
				<div class="topNum">
					<div class="endIn">
						作业剩余次数:
					</div>
					<div class="numIn">
						0 次
					</div>
				</div>
				<div class="homeworkRecord">
					<div class="inRecordContent" v-for="(item,index) in 20" :key="index">
						<div class="inOneC">
							<div class="contentInLeft">
								<!-- 圈 -->
								<div class="mySquare">
									<div class="neiQ">

									</div>
								</div>
								<!-- emd -->
							</div>
							<div class="InthiContent" >
								<div class="Intielt">
									<div class="" style="color: #a7a7a7;">
										2022-12-01
									</div>
									<div class="" style="margin-top: 6px;">
										第一次
									</div>
								</div>
								<div class="readOver">
									90
								</div>
								<div class="lookRecord">
									查看记录
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radio: 3,
				HomeWorkS: [],
				dialogVisible: false,
				userInfo: {}
			};
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			getWork() {
				this.$axios.post('https://vvv.52ecode.cn/api/v1.testCatalog/index', {
					website_id: 1,
					idcard: JSON.parse(sessionStorage.getItem('InfoMation')).idcard,
					pattern: 0
				}).then(res => {
					console.log(res.data.data);
					this.HomeWorkS = res.data.data.exam
				}).catch(err => {
					console.log(err);
				})
			}
		},
		created() {
			this.getWork()
			this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
		}
	}
</script>

<style>
	.InthiContent{
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		padding-right: 20px;
	}
	.InthiContent:hover{
		background-color: #f7fafc;
	}
	.el-button--mini,
	.el-button--small {
		font-size: 12px;
		border-radius: 3px;
		height: 40px;
		width: 120px;
		font-size: 20px;
	}

	.el-button+.el-button {
		margin-left: 24px;
		height: 40px;
		width: 120px;
		font-size: 20px;
	}

	.homeworkRecord {
		height: 420px;
		overflow-x: hidden;
	}

	.homeworkRecord::-webkit-scrollbar {
		display: none
	}

	.lookRecord {
		color: #0087F7;
		letter-spacing: 1.2pt;
		cursor: pointer;
		font-size: 18px;
		border-bottom: solid 1px #0087F7;
		padding-bottom: 2px;
	}

	.readOver {
		color: red;
		font-size: 20px;
		letter-spacing: 2px;
	}

	.Intielt {
		margin-left: 24px;
		font-size: 18px;
		letter-spacing: 1pt;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
	}

	.inOneC {
		display: flex;
		align-items: center;
	}

	.contentInLeft {
		display: flex;
		margin-left: -42px;
		align-items: center;
	}

	.neiQ {
		width: 12px;
		height: 12px;
		border: solid 4px #c6c6c6;
		background-color: #FFFFFF;
		border-radius: 50%;
	}

	.mySquare {
		background-color: #FFFFFF;
		width: 32px;
		height: 32px;
		/* border: solid 1px red; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.inRecordContent {
		padding: 24px;
		width: 87%;
		border-left: solid 3px #bebebe;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.numIn {
		font-size: 20px;
		color: #0074D9;
		font-weight: bold;
		margin-left: 8px;
	}

	.endIn {
		font-weight: bold;
		letter-spacing: 1.5pt;
		font-size: 18px;
	}

	.topNum {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.inRecord {}

	.look {
		border-bottom: solid 1px #67a2ff;
		color: #67a2ff;
		cursor: pointer;
		font-weight: bold;
		padding-bottom: 1.5px;
		letter-spacing: 1pt;
		margin-left: 20px;
	}

	.myData {
		color: #b2aab3;
		display: flex;
	}

	.statusIn {
		color: #b8a29b;
	}

	.homworkname {
		height: 48px;
		padding: 16px 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.detialRight {
		margin-left: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1px #eaeaea;
		width: 100%;
	}

	.selectWork {
		padding: 0 24px;
		display: flex;
		align-items: center;
	}

	.selectWork:hover {
		background-color: #f7fafc;
	}

	.detialLeft {
		border-radius: 4px;
		color: #FFFFFF;
		width: 50px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #c4c9cc;
	}

	.theInfo {
		margin-top: 16px;
	}

	.myScreen {
		margin-right: 24px;
		color: #9a9aa3;
		letter-spacing: 2pt;
	}

	.inScreen {
		display: flex;
	}

	.screen {
		padding: 16px 24px;
	}

	.taskTitleThen {
		padding: 0 24px 16px 24px;
		border-bottom: solid 1px #eaeaea;
	}
</style>
